<template>
  <div class="industry">
    <div class="head">
      <div class="ift-back" @click="returns"></div>
      <h1>漫评</h1>
      <div class="ift-menu" @click="flags"></div>
    </div>
    <van-tabs v-model="active" animated title-active-color="#fc6976">
      <van-tab title="热门推荐">
        <ul class="hotspot">
          <li v-for="(item, index) in image" :key="index">
            <div class="title">
              <p>{{ item.name }}</p>
              <div>
                <span>{{ item.time }}</span>
                <span><i class="ift-eye-open"></i>{{ item.quantity }}</span>
              </div>
            </div>
            <div class="imgs">
              <img :src="item.url" alt="" />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="最近更新">
        <ul class="hotspot">
          <li v-for="(item, index) in image" :key="index">
            <div class="title">
              <p>{{ item.name }}</p>
              <div>
                <span>{{ item.time }}</span>
                <span><i class="ift-eye-open"></i>{{ item.quantity }}</span>
              </div>
            </div>
            <div class="imgs">
              <img :src="item.url" alt="" />
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <div class="switch" v-show="flag">
      <ul class="Icon">
        <li @click="homePage">
          <div class="image icon-sy"></div>
          首页
        </li>
        <li @click="Ranking">
          <div class="image icon-sj"></div>
          书架
        </li>
        <li @click="classification">
          <div class="image icon-gx"></div>
          更新
        </li>
        <li @click="consulting">
          <div class="image icon-zx"></div>
          咨询
        </li>
        <li @click="images">
          <div class="image icon-tp"></div>
          图片
        </li>
        <li @click="character">
          <div class="image icon-rw"></div>
          人物
        </li>
        <li>
          <div class="image icon-wd" @click="my"></div>
          我的
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      image: [
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
        {
          name: "TV动画「IDOLiSH7 Third BEAT!」第13话放送贺图公开",
          url: "https://image.32yx.com/news/cvynanyz.jpg",
          time: "2021.09.27",
          quantity: "999",
        },
      ],
      flag: false,
    };
  },
  methods: {
    consulting() {
      this.$router.push("/find/consulting");
    },
    images() {
      this.$router.push("/find/image");
    },
    character() {
      this.$router.push("/find/character");
    },
    homePage() {
      this.$router.push("/homePage");
    },
    classification() {
      this.$router.push("/classification");
    },
    Ranking() {
      this.$router.push("/Ranking");
    },
    my() {
      this.$router.push("/my");
    },
    flags() {
      this.flag = !this.flag;
    },
    returns() {
      this.$router.go("-1");
    },
  },
};
</script>

<style lang="less">
.industry {
  .head {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 45px;
    background-color: white;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    div {
      width: 45px;
      font-size: 20px;
      color: #fc6976;
    }
    h1 {
      flex: 1;
      font-size: 18px;
      font-weight: 500;
    }
    h2 {
      width: 45px;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .van-tabs__wrap {
    width: 100%;
    background-color: white;
    position: fixed;
    z-index: 1;
    top: 45px;
    .van-tabs__line {
      z-index: 0;
      background-color: #fc6976;
    }
  }
  .hotspot {
    width: 96%;
    margin: 0 auto;
    height: 100vh;
    padding-top: 100px;
    li {
      font-size: 14px;
      height: 12%;
      margin: 5% 0;
      &:nth-last-child(1) {
        padding-bottom: 70px;
      }
      .title {
        width: 68%;
        height: 100%;
        display: inline-block;
        position: relative;
        p {
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          word-break: break-all;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        div {
          width: 100%;
          position: absolute;
          bottom: 0;
          font-size: 12px;
          color: #999;
          display: flex;
          justify-content: space-between;
          i {
            padding-right: 5%;
          }
        }
      }
      .imgs {
        float: right;
        height: 100%;
        width: 30%;
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
          position: absolute;
          top: -40%;
          left: 0;
        }
      }
    }
  }
  .switch {
    position: fixed;
    top: 45px;
    z-index: 2;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    .Icon {
      background-color: white;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 2%;
      li {
        width: 25%;
        font-size: 14px;
        margin: 2% 0;
        text-align: center;
        div {
          margin: 1% auto;
          width: 42px;
          height: 42px;
          background-image: url(../../assets/sprite.tabs.f5a3c@2x.png);
          background-size: 450%;
          background-repeat: no-repeat;
        }
        .icon-sy {
          background-image: url(../../assets/咨询.png);
          background-size: 800%;
          background-position: 63% 97%;
        }
        .icon-sj {
          background-position: 100% 48%;
        }
        .icon-gx {
          background-position: 66% 0%;
        }
        .icon-zx {
          background-image: url(../../assets/咨询.png);
          background-size: 800%;
          background-position: 102% -2%;
        }
        .icon-tp {
          background-image: url(../../assets/咨询.png);
          background-size: 800%;
          background-position: 77% 97%;
        }
        .icon-rw {
          background-image: url(../../assets/咨询.png);
          background-size: 800%;
          background-position: 50% 97%;
        }
        .icon-wd {
          background-position: 66% 100%;
        }
      }
    }
  }
}
</style>